<template>
    <div>
        <!-- 条件查询 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="query" size="mini">
                <el-form-item label="ID">
                    <el-input v-model.trim.trim="query.id" placeholder="请输入ID" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input v-model.trim.trim="query.username" placeholder="请输入用户名" clearable></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model.trim.trim="query.email" placeholder="请输入邮箱" clearable></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input v-model.trim.trim="query.role" placeholder="请输入角色" clearable></el-input>
                </el-form-item>
                <el-form-item label="登录IP">
                    <el-input v-model.trim.trim="query.loginIp" placeholder="请输入登录IP" clearable></el-input>
                </el-form-item>
                <el-form-item label="注册IP">
                    <el-input v-model.trim.trim="query.regIp" placeholder="请输入注册IP" clearable></el-input>
                </el-form-item>
                <el-form-item label="个人签名">
                    <el-input v-model.trim.trim="query.sign" placeholder="请输入个人签名" clearable></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model.trim="query.state" clearable style="width: 120px">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="已删除" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期范围">
                    <el-date-picker
                            clearable
                            v-model.trim="query.begin"
                            placeholder="开始时间"
                            value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item label="-">
                    <el-date-picker
                            clearable
                            v-model.trim="query.end"
                            placeholder="结束时间"
                            value-format="yyyy-MM-dd"/>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
                    <el-button icon="el-icon-refresh" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div>
            <el-table
                    v-loading="loading"
                    :data="list"
                    border
                    size="mini"
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="id"
                        label="ID"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column align="center" prop="avatar" label="头像" width="60">
                    <template slot-scope="scope">
                        <el-image
                                class="img"
                                :src="scope.row.avatar"
                                :preview-src-list="[scope.row.avatar]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="角色"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="sign"
                        label="个人签名"
                        align="center"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态"
                        align="center"
                        width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state == '1'">正常</el-tag>
                        <el-tag type="danger" v-if="scope.row.state == '0'">已删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="updateTime"
                        label="更新时间"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="200">
                    <template slot-scope="scope">
                        <!--                        点击打开窗口，传当前行数据   -->
                        <el-button type="primary" @click="handleEdit(scope.row)" size="small">重置密码</el-button>
                        <el-button type="danger" v-if="scope.row.state !== '0'" @click="handleDelete(scope.row.id)"
                                   size="small">删除
                        </el-button>
                        <el-button type="danger" v-if="scope.row.state === '0'" disabled
                                   @click="handleDelete(scope.row.id)" size="small">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <el-pagination
                align="center"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-sizes="[10, 20,30,50]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
        <!-- 子组件: 管理员修改用户密码 -->
        <!-- 传递重置密码事件给子组件  @resetPassword="resetPassword"   传递方法前面要用 @  子组件不用接收方法，触发就行
             传递关闭窗口事件给子组件  @remoteClose="remoteClose"       传递方法前面要用 @  子组件不用接收方法，触发就行
             传递关闭窗口属性给子组件  :visible="visible"
             传递用户名级子组件显示    :targetResetUserName="targetResetUserName" -->
        <Reset
                @resetPassword="resetPassword"
                @remoteClose="remoteClose"
                :visible="visible"
                :targetResetUserName="targetResetUserName"/>
    </div>
</template>

<script>
    import {getUserList, deleteUserById, resetPassword} from '@/api/api'
    // import md5 from 'js-md5';

    import Reset from "./Reset";

    export default {
        components: {
            Reset
        },
        data() {
            return {
                loading: false,
                list: [],
                query: {},
                page: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                // 定义重置用户密码数据属性，传给子组件的
                targetResetUserName: '',
                visible: false,
                userId: ''
            }
        },
        created() {
            this.fetchData()
        },
        methods: {
            // 打开重置密码窗口（子组件）
            // 把父组件的数据赋值给定义的传递给子组件的属性上
            handleEdit(item) {
                this.targetResetUserName = item.username
                this.userId = item.id
                this.visible = true
            },
            // 获取分类列表数据
            fetchData() {
                this.loading = true
                getUserList(this.page.current, this.page.size, this.query).then(result => {
                    this.loading = false
                    if (result.code === 20000) {
                        this.list = result.data.records
                        this.page.total = result.data.total
                    }
                })
            },
            // 分页-切换每页显示多少条记录
            handleSizeChange(size) {
                this.page.size = size
                this.fetchData()
            },
            // 分页-切换当前页码
            handleCurrentChange(current) {
                this.page.current = current
                this.fetchData()
            },
            // 条件查询
            queryData() {
                this.page.current = 1
                this.fetchData()
            },
            // 条件查询-重置表单
            reload() {
                this.query = {}
                this.fetchData()
            },
            // 删除
            handleDelete(id) {
                console.log('id', id)
                this.$confirm('确定删除这条记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 发送删除请求
                    deleteUserById(id).then(response => {
                        // 刷新列表数据
                        this.fetchData()
                        // 处理响应结果提示
                        if (response.code === 20000) {
                            this.$message.success(response.message)
                        } else {
                            this.$message.error(response.message)
                        }
                    })
                }).catch(() => {
                    // 取消删除，不用理会
                })
            },
            // 关闭窗口（子组件调用此方法关闭窗口）
            remoteClose() {
                this.visible = false
            },
            // 重置密码
            // 子组件调用父组件此方法执行重置密码，passwordValue 为接收子组件传来的值
            resetPassword(passwordValue) {
                if (passwordValue === '') {
                    this.$message.error('新密码不能为空')
                    return;
                }
                if (passwordValue !== '') {
                    if (passwordValue.length < 6 || passwordValue.length > 20) {
                        this.$message.error('密码长度须为 6 至 20 位');
                        return;
                    }
                }
                // 问题来了，前端 md5 加密密码后，后端再加密，用户不知道自己的密码是什么了。要用之前md5加密后的密码才能登录成功。
                // this.passwordValue = md5(this.passwordValue)
                resetPassword(this.userId, passwordValue).then(response => {
                    if (response.code === 20000) {
                        this.$message.success(response.message)
                        this.visible = false
                    } else {
                        this.$message.error(response.message)
                        this.visible = false
                    }
                })
            }


        }
    }
</script>
<style scoped>
    .el-pagination {
        padding: 20px;
    }
</style>